<template>
  <div ref="domRef" class="dom-wrapper"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { AnimateWorld } from './World/World';
let world: AnimateWorld;
const domRef = ref(null);
onMounted(async () => {
  if (domRef.value) {
    // create a new world
    world = new AnimateWorld(domRef.value);
    // complete async tasks
    await world.init();

    // start the animation loop
    world.start();
  }
});
onUnmounted(() => {
  world?.dispose();
});
</script>

<style scoped>
.dom-wrapper {
  width: 100%;
  height: 100%;
}
</style>
